<template>
  <div id="app">
    <section class="question baseInfo" :class="{ 'warning': !isValidPass.baseInfo }" @click="isValidPass.baseInfo = true">
      <Info v-model="formData.info" class="question"></Info>
      <span class="error" v-text="!isValidPass.baseInfo ? baseInfo.tip : ''"></span>
    </section>
    <!-- 性别 -->
    <section class="question" :class="{ 'warning': !isValidPass.gender }" @click="isValidPass.gender = true">
      <Title :required="gender.required">
        <template v-slot:desc>您的性别是</template>
      </Title>
      <InputList :value.sync="formData.gender" column="column" :inputType="gender.inputType" :inputName="gender.inputName" :options="gender.options"></InputList>
      <span class="error" v-text="!isValidPass.gender ? gender.tip : ''"></span>
    </section>
    <!-- 年级 -->
    <section class="question" :class="{ 'warning': !isValidPass.grade }" @click="isValidPass.grade = true">
      <Title :required="true">
        <template v-slot:desc>您现在的年级是</template>
      </Title>
      <InputList :value.sync="formData.grade" :inputType="grade.inputType" :inputName="grade.inputName" :options="grade.options"></InputList>
      <span class="error" v-text="!isValidPass.grade ? grade.tip : ''"></span>
    </section>
    <div v-if="isShow">
      <!-- consideration -->
      <section class="question" :class="{ 'warning': !isValidPass.consideration }" @click="isValidPass.consideration = true">
        <Title :required="consideration.required" :len="consideration.len">
          <template v-slot:desc>您在毕业后关于就业行业优先考虑的因素有 ？</template>
        </Title>
        <InputList :value.sync="formData.consideration" :inputType="consideration.inputType" :inputName="consideration.inputName" :options="consideration.options"></InputList>
        <span class="error" v-text="!isValidPass.consideration ? consideration.tip : ''"></span>
        <QuesFooter :len="consideration.len" :selected="formData.consideration.length"></QuesFooter>
      </section>
      <!-- address -->
      <section class="question" :class="{ 'warning': !isValidPass.address }" @click="isValidPass.address = true">
        <Title :required="address.required" :len="address.len">
          <template v-slot:desc>关于毕业后就业地的选择 ，您最看重以下哪些因素？</template>
        </Title>
        <InputList :value.sync="formData.address" column="column" :inputType="address.inputType" :inputName="address.inputName" :options="address.options"></InputList>
        <span class="error" v-text="!isValidPass.address ? address.tip : ''"></span>
        <QuesFooter :len="address.len" :selected="formData.address.length"></QuesFooter>
      </section>
      <!-- detail -->
      <section class="question" :class="{ 'warning': !isValidPass.detail }" @click="isValidPass.detail = true">
        <Title :required="detail.required">
          <template v-slot:desc>请您阅读下面的题目，并就每句话同个人实际情况的符合程度作出判断。</template>
        </Title>
        <InputTable v-model="formData.detail" :options="detail.options" :titles="detail.titles"></InputTable>
        <span class="error" v-text="isValidPass.detail !== true ? detail.tip + (formData.detail.indexOf(-1) + 1) : ''"></span>
      </section>
    </div>
    <!-- 提交按钮 -->
    <button @click="submit" class="primary">提交</button>
    <!-- 进度条 -->
    <Progress :value="getProgress"></Progress>
    <!-- 弹出框 -->
    <Dialog @click="showDialog" :isShow="isShowDialog" :title="dialogTitle" :desc="dialogDescCont"></Dialog>
  </div>
</template>

<script>

import InputList from './components/InputList'
import Title from './components/Title'
import InputTable from './components/InputTable'
import Info from './components/Info'
import QuesFooter from './components/QuesFooter'
import Dialog from './components/Dialog'
import Progress from './components/Progress'

export default {
  name: 'app',
  components: {
    InputList,
    Title,
    InputTable,
    Info,
    QuesFooter,
    Dialog,
    Progress
  },
  data() {
    return {
      baseInfo: {
        tip: '请输入内容'
      },
      // 性别
      gender: {
        required: true,
        inputType: 'radio',
        inputName: 'gender',
        options: [
          { id: 'ge1', label: '男', value: 0 },
          { id: 'ge2', label: '女', value: 1 }
        ],
        tip: '请选择选项'
      },
      // 年级
      grade: {
        required: true,
        inputType: 'radio',
        inputName: 'grade',
        options: [
          { id: 'ga1', label: '大一', value: 0 },
          { id: 'ga2', label: '大二', value: 1 },
          { id: 'ga3', label: '大三', value: 2 },
          { id: 'ga4', label: '大四', value: 3 },
          { id: 'ga5', label: '研究生在读', value: 4 },
          { id: 'ga6', label: '博士生在读', value: 5 }
        ],
        tip: '请选择选项'
      },
      // 优先考虑因素
      consideration: {
        required: true,
        len: [1, 6],
        inputType: 'checkbox',
        inputName: 'grade',
        options: [
          { id: 'co1', label: '行业前景', value: 0 },
          { id: 'co2', label: '竞争激烈程度', value: 1 },
          { id: 'co3', label: '专业是否对口', value: 2 },
          { id: 'co4', label: '收入水平', value: 3 },
          { id: 'co5', label: '工作的稳定性', value: 4 },
          { id: 'co6', label: '工作环境', value: 5 },
          { id: 'co7', label: '工作的压力程度', value: 6 },
          { id: 'co8', label: '家人和朋友的意见', value: 7 },
          { id: 'co9', label: '个人兴趣爱好', value: 8 },
          { id: 'co10', label: '其他', value: 9 },
          { id: 'co11', label: '实现自我价值', value: 10 }
        ],
        tip: '请选择选项'
      },
      // 就业地考虑因素
      address: {
        required: true,
        len: [1, 3],
        inputType: 'checkbox',
        inputName: 'grade',
        options: [
          { id: 'ad1', label: '经济发展水平', value: 0 },
          { id: 'ad2', label: '医疗，教育，交通等是否发达', value: 1 },
          { id: 'ad3', label: '物价高低', value: 2 },
          { id: 'ad4', label: '离家距离', value: 3 },
          { id: 'ad5', label: '生活习惯与文化习俗', value: 4 },
          { id: 'ad6', label: '气候条件', value: 5 },
          { id: 'ad7', label: '当地政府的人才引进政策', value: 6 },
          { id: 'ad8', label: '其他', value: 7 }
        ],
        tip: '请选择选项'
      },
      // 符合程度
      detail: {
        required: true,
        titles: [
          { name: '非常不符合', value: 0 },
          { name: '不符合', value: 1 },
          { name: '比较不符合', value: 2 },
          { name: '比较符合', value: 3 },
          { name: '符合', value: 4 },
          { name: '非常符合', value: 5 }
        ],
        options: [
          { id: 'de1', name: '1、我经常能从实习中找到乐趣' },
          { id: 'de2', name: '2、我努力实习是为了以后有好的前途' },
          { id: 'de3', name: '3、如果我付出必要的努力，我一定能解决大多数的问题' },
          { id: 'de4', name: '4、我努力取得好实习是为了有更好的工作' },
          { id: 'de5', name: '5、我认为企业里学习的东西才是对我最有用' },
          { id: 'de6', name: '6、我经常为了学习的事情紧张焦虑' },
          { id: 'de7', name: '7、我能安排好我的学习时间' }
        ],
        tip: '此题为必答题，请回答小题'
      },
      // 对话框
      dialogTitle: '系统提示',
      // 控制对话框显示
      isShowDialog: false,
      dialogDesc: '',
      // 表单数据
      formData: {
        info: {
          name: '',
          age: '',
          phone: ''
        },
        gender: -1,
        grade: -1,
        consideration: [],
        address: [],
        detail: new Array(7).fill(-1, 0, 7)
      },
      // 校验是否通过
      isValidPass: {
        baseInfo: true,
        gender: true,
        grade: true,
        consideration: true,
        address: true,
        detail: true
      }
    }
  },
  computed: {
    // 控制显示联动
    isShow() {
      return this.formData.grade > 2
    },
    // 对话框内容
    dialogDescCont: {
      get() {
        if (this.isShowDialog === true) return this.dialogDesc
        if (this.formData.consideration.length > this.consideration.len[1]) {
          this.showDialog(`此题最多只能选择${ this.consideration.len[1] }项`)
        }
        if (this.formData.address.length > this.address.len[1]) {
          this.showDialog(`此题最多只能选择${ this.address.len[1] }项`)
        }
        return this.dialogDesc
      },
      set(val) {
        this.dialogDesc = val
      }
    },
    // 计算进度
    getProgress() {
      let value = 0
      this.formData.info.name !== '' && this.formData.info.age !== '' && this.formData.info.phone !== '' && value++
      this.formData.gender !== -1 && value++
      this.formData.grade !== -1 && value++
      if (!this.isShow) {
        return (value / 3).toFixed(2)
      }
      this.formData.consideration.length > 0 && value++
      this.formData.address.length > 0 && value++
      this.formData.detail.indexOf(-1) === -1 && value++
      return (value / 6).toFixed(2)
    }
  },
  methods: {
    // 提交
    submit(e) {
      e.preventDefault()
      if (!this.validate()) {
        this.dialogDescCont = `请确保所有内容填写正确，页面将自动定位到第一个不符合要求的题目，请检查！`
        this.isShowDialog = true
        return
      }
      alert('提交成功!')
    },
    // 校验
    validate() {
      this.isValidPass.baseInfo = (this.formData.info.name !== '' && this.formData.info.age !== '' && this.formData.info.phone !== '')
      this.isValidPass.gender = this.formData.gender !== -1
      this.isValidPass.grade = this.formData.grade !== -1
      if (!this.isShow) {
        return this.isValidPass.baseInfo && this.isValidPass.gender && this.isValidPass.grade
      }
      this.isValidPass.consideration = this.formData.consideration.length > 0
      this.isValidPass.address = this.formData.address.length > 0
      this.isValidPass.detail = this.formData.detail.indexOf(-1) === -1
      for(let k in this.isValidPass) {
        if(!this.isValidPass[k]) return false
      }
      return true
    },
    // 显示对话框，还原选择列表长度
    showDialog(val) {
      this.isShowDialog = !this.isShowDialog
      this.dialogDescCont = val
      setTimeout(() => {
        this.formData.consideration.splice(this.consideration.len[1])
        this.formData.address.splice(this.address.len[1])
      })
    }
  }
}
</script>

<style lang="less">
body {
  background-color: #e6eff7;
}
// 禁止选择
*{
  -moz-user-select: none;
  -o-user-select:none;
  -khtml-user-select:none;
  -webkit-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
#app {
  // 版心
  box-sizing: border-box;
  margin: 0 auto;
  padding: 100px 95px;
  width: 920px;
  min-height: 800px;
  background-color: #fff;

  // 问题
  .question {
    box-sizing: border-box;
    margin: 15px 0;
    border: 2px solid #fff;
  }
  .warning {
    border: 2px solid rgb(255, 153, 0);
  }
  .error {
    display: inline-block;
    height: 10px;
    line-height: 10px;
    color: red;
    font-size: 12px;
  }
  // 按钮
  .primary {
      position: absolute;
      left: 50%;
      transform: translate(-50%);
      min-width: 64px;
      font-size: 14px;
      height: 40px;
      box-sizing: border-box;
      line-height: 38px;
      border-radius: 2px;
      color: #fff;
      text-align: center;
      text-decoration: none;
      border: none;
      background: #0095FF;
      outline: none;
      cursor: pointer;
    }
}
</style>
